<template>
  <Layout nav-title="我的">
    <view class="profile-bg">
      <!-- 头像区 -->
      <view class="profile-header">
        <image class="avatar-img" src="../../static/MyImage/avatar.jpg" />
        <view class="header-info">
          <view class="header-row">
            <text class="header-name">{{ memberStore.username }}</text>
            <view class="header-edit" @click="onEditProfile">
              <img src="../../static/MyImage/edit.png" class="icon-edit" @click="goToEditMy" />
            </view>
          </view>
          <text class="header-birth">1996-11-02</text>
        </view>
      </view>

      <!-- 我的档案卡片 -->
      <view class="card-box">
        <view class="card-title-row">
          <view class="card-line"></view>
          <text class="card-title">我的档案</text>
        </view>
        <view class="card-actions">
          <view class="card-action" @click="onOrderClick">
            <img src="../../static/MyImage/order.png" class="card-action-icon" />
            <text class="card-action-text">挂号订单</text>
          </view>
          <view class="card-action" @click="onHistoryClick">
            <img src="../../static/MyImage/history.png" class="card-action-icon" />
            <text class="card-action-text">过往病史</text>
          </view>
        </view>
      </view>

      <!-- 个人健康数据卡片 -->
      <view class="card-box">
        <view class="card-title-row">
          <view class="card-line"></view>
          <text class="card-title">个人健康数据</text>
          <text class="card-date">2022-12-21</text>
          <view class="card-edit" @click="onEditHealth">
            <img src="../../static/MyImage/edit.png" class="icon-edit" />
          </view>
        </view>
        <view class="health-table">
          <view class="health-row">
            <text class="health-label">身高（cm）</text>
            <text class="health-value">{{ healthStore.height }}</text>
          </view>
          <view class="health-row">
            <text class="health-label">体重（kg）</text>
            <text class="health-value">{{ healthStore.weight }}</text>
          </view>
          <view class="health-row">
            <text class="health-label">血压（mmHg）</text>
            <text class="health-value">{{ healthStore.blood_ressure }}</text>
          </view>
          <view class="health-row">
            <text class="health-label">血糖（mmol/L）</text>
            <text class="health-value">{{ healthStore.blood_sugar }}</text>
          </view>
        </view>
      </view>

      <!-- 菜单列表 -->
      <view class="menu-list">
        <view class="menu-item" v-for="item in menuList" :key="item.id" @click="onMenuClick(item)">
          <img :src="item.icon" class="menu-icon" />
          <text class="menu-title">{{ item.title }}</text>
          <img src="../../static/MyImage/arrow-right.png" class="menu-arrow" />
        </view>
      </view>
    </view>
  </Layout>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 2. 引入全局健康数据 store
import { useHealthStore } from '@/store/health/health'

import Layout from '@/components/Layout.vue'
import { getLogin } from '@/utils/http'
import { useMemberStore } from "@/store";
import { onShow } from "@dcloudio/uni-app";

// 4. 获取健康数据 store 实例
const healthStore = useHealthStore()

const memberStore = useMemberStore()
onShow(() => {
  if (!memberStore.isLogin) {
    uni.navigateTo({
      url: '/pages/login/login',
    })
  }
})

const menuList = ref([
  { id: 1, title: "地址管理", icon: "../../static/MyImage/address.png" },
  { id: 2, title: "医生入驻", icon: "../../static/MyImage/doctor.png" },
  { id: 3, title: "退出账号", icon: "../../static/MyImage/logout.png" },
  { id: 4, title: "关于", icon: "../../static/MyImage/about.png" },
]);

function onEditProfile() {
}
function onOrderClick() {
  uni.showToast({ title: "点击挂号订单", icon: "none" });
  uni.navigateTo({
    url: "/pages/component/MyPage/appointmentbooking/appointmentbooking",
  });
}
function onHistoryClick() {
  uni.showToast({ title: "点击过往病史", icon: "none" });
  uni.navigateTo({
    url: "/pages/component/MyPage/medicalhistorydata/medicalhistorydata",
  });
}
function onEditHealth() {
  uni.showToast({ title: "编辑健康数据", icon: "none" });
  // 跳转到更新健康数据页面
  uni.navigateTo({ url: "/pages/component/MyPage/update/update" });
}
function onMenuClick(item: any) {
  if (item.title === "医生入驻") {
    uni.navigateTo({ url: "/pages/component/MyPage/doctor/doctor" });
  } else {
    uni.showToast({ title: item.title, icon: "none" });
  }
  if (item.title === "退出账号") {
    uni.showModal({
      title: "确认退出",
      content: "确定要退出账号吗？",
      success: (res) => {
        if (res.confirm) {
          const memberStore = useMemberStore()
          memberStore.setIsLogin(false)
          memberStore.setToken('')
          memberStore.setUserPhone('')
          memberStore.setUserUid('')
          memberStore.setusername('')
          uni.navigateTo({ url: "/pages/login/login" });
        }
      },
    })
  } else {
    uni.showToast({ title: item.title, icon: "none" });
  }
}
// 点击跳转到个人信息编辑页
const goToEditMy = () => {
  uni.navigateTo({
    url: "/pages/component/MyPage/editmy/editmy",
  });
};
</script>

<style scoped>
.profile-bg {
  background: #ededed;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.profile-header {
  display: flex;
  align-items: center;
  background: #ededed;
  padding: 40rpx 30rpx 0 30rpx;
}
.avatar-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 30rpx;
  background: #fff;
}
.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.header-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  margin-right: 16rpx;
}
.header-edit {
  width: 36rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.1);
  margin-left: 8rpx;
}
.icon-edit {
  width: 28rpx;
  height: 28rpx;
}
.header-birth {
  font-size: 26rpx;
  color: #999;
}

.card-box {
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(76, 175, 80, 0.1);
  padding: 0 0 30rpx 0;
}
.card-title-row {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 80rpx;
  position: relative;
}
.card-line {
  width: 8rpx;
  height: 36rpx;
  background: #4caf50;
  border-radius: 8rpx;
  margin-right: 18rpx;
}
.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
}
.card-date {
  font-size: 24rpx;
  color: #bbb;
  margin-left: 18rpx;
}
.card-edit {
  width: 36rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.1);
  margin-left: auto;
}

.card-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20rpx 30rpx 0 30rpx;
  gap: 60rpx;
}
.card-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
}
.card-action-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}
.card-action-text {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
}

.health-table {
  padding: 0 30rpx;
  margin-top: 10rpx;
}
.health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
}
.health-label {
  font-size: 26rpx;
  color: #888;
}
.health-value {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
}

.menu-list {
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(76, 175, 80, 0.1);
  overflow: hidden;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background 0.2s;
  cursor: pointer;
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-icon {
  width: 38rpx;
  height: 38rpx;
  margin-right: 24rpx;
}
.menu-title {
  flex: 1;
  font-size: 28rpx;
  color: #222;
}
.menu-arrow {
  width: 28rpx;
  height: 28rpx;
}
</style>
